<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .harder {
            text-align: center;
            border-bottom: 2px solid #007bbd;
            color: #007bbd;
            font-size: 20px;
        }
    
        .affixion {
            margin-top: 20px;
        }
    
        .lists {
            display: flex;
            justify-content: space-between;
        }
        .finish{
            border: 2px solid rebeccapurple;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <div class="harder">TO DO LIST</div>
        <p class="affixion">
            添加任务：
            <input v-model.trim="todo" @keydown.enter="add" type="text" placeholder="">
            <button @click="add">添加</button>
        </p>
        <div class="lists">
            <button @click="clearDone">清除已完成任务</button>
            <button @click="showList('done')">已完成任务</button>
            <button @click="showList('undone')">未完成任务</button>
        </div>
        <div>
            <ul class="list-group" v-for="(item,index) in list">
                <li class="list-group-item lists">
                    <div>
                        <input type="checkbox" :checked="item.done" @click="myChange(index)">
                        {{item.value}}
                    </div>
                    <button @click="deleteItem(index)">删除</button>
                </li>
            </ul>
        </div>
        
        <div class="row finish">
           
            <div class="col-md-6">
                         
                <ul>
                    <li v-for="item in finishList">
                        {{item.value}}
                    </li>
                </ul>
            </div>
            <div class="col-md-6">
                         
                <ul>
                    <li v-for="item in unfinishList">
                        {{item.value}}
                    </li>
                </ul>
            </div>

          
        </div>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            todo: "",
            list: [{
                value: "吃饭",
                done: true
            }, {
                value: "睡觉",
                done: false

            }, {
                value: "打豆豆",
                done: false

            }],
            allList: [],
            finishList:[],
            unfinishList:[]
        },
        created() {
            this.allList = this.list;
        },
        methods: {
            showList(status) {
                if(status=="done"){
                
                    this.finishList = this.allList.filter(item=>item.done);
                    this.list = this.list.filter(item=> !item.done);
                }
                if(status=="undone"){
                    this.unfinishList = this.list.filter(item=>{
                        return !item.done
                    })
                }
            },
            add() {
                if (this.todo == "") return;
                this.allList.push({
                    value: this.todo,
                    done: false
                });
                this.list.push({
                    value: this.todo,
                    done: false
                });
                this.todo = "";
            },
            deleteItem(index) {
                this.list.splice(index, 1);
                this.allList.splice(index, 1);
            },
            myChange(index) {
                this.list[index].done = !this.list[index].done;
                if (this.done == ture) {
                    this.list.splice(index, 1);
                    this.allList.splice(index, 1);
                }
            },
            clearDone() {
                this.list = this.list.filter(item => !item.done);
            },
        },
    })
</script>
</html>